<template>
	<view class="cy-container-wrapper full box relative" id="mapWrap" :style="[{'--status-height':statusBarHeight_}]">
		<view class="status-wrapper"></view>
		<view class="city-change-wrap">
			<image :src="sourceUrl + '/xl-location.png'" class="location-icon"></image>
			<text class="address-text" @click="openPicker">{{ address }}</text>
			<image :src="sourceUrl+'/xl-arrow-down.png'" class="arrow"></image>
		</view>
		<view class="map-container full box relative">
			<map id="map" :style="mapStyle" :longitude="location.lng" :latitude="location.lat" :scale="scale"
				:markers="markerList" @markertap="markerTapHandle" @callouttap="markerTapHandle">
				<!-- <cover-view slot="callout">
					<block v-for="(c, cIndex) in customCalloutMarkerIds" :key="cIndex">
						<cover-view class="custom-callout" :marker-id="c">
							<cover-view class="content">
								{{markerList[cIndex].line_name}}
							</cover-view>
						</cover-view>
					</block>
				</cover-view> -->
			</map>
		</view>
		<cover-view class="cy-footer-wrap" :class="{active:showSearch}">
			<cover-view class="search-box" @click="toSearch">
				<cover-image :src="sourceUrl + '/search-icon.png'" class="search-icon"></cover-image>
				<cover-view class="search-input">请输入国家或城市名字</cover-view>
			</cover-view>
		</cover-view>
		<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
			:pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel" @onConfirm="onConfirm" />
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import { mapGetters } from 'vuex'
	import { getRegionData } from '@/constant/region.js'
	export default {
		components: { mpvueCityPicker },
		onReady() {
			this.getRect()
			this.mapCtx = uni.createMapContext('map', this)
		},
		created() {
			this.address = this.addressText
		},
		onLoad() {
			this.initData()
			this.initRegion()
			console.log(this.location, 'location');
		},
		methods: {
			onCancel() {
				this.openSearch()
			},
			initRegion() {
				const [p, c, r] = getRegionData()
				this.province = p
				this.city = c
				this.area = r
				this.is_load = true
			},
			openPicker() {
				this.showSearch = !this.showSearch
				this.$refs.mpvueCityPicker.show()
			},
			moveMap({ lng, lat }) {
				this.mapCtx.moveToLocation({
					longitude: lng,
					latitude: lat,
				})
			},
			async onConfirm(ev) {
				const { label } = ev
				const [p, c, r] = label.split(',')
				this.address = `${p}-${c}-${r}`
				this.openSearch()
				const [error, resp] = await this.$store.dispatch('location/getLngLatByAddress', `${p}${c}${r}`)
				if (error) return this.$toast({ title: '获取失败' })
				this.moveMap(resp.location)
			},
			async openSearch() {
				await this.$delay(100)
				this.showSearch = !this.showSearch
			},
			markerTapHandle(ev) {
				const { markerId } = ev
				uni.navigateTo({
					url: `/pages-bundle/line-detail/line-detail?id=${markerId}`
				})
				console.log(ev, 'ev');
			},
			async toSearch() {
				uni.navigateTo({
					url: '/pages-bundle/search/search'
				})
			},
			generateMarker(list) {
				const ids = []
				this.markerList = list.map(item => {
					const { lat, lng, id, line_name } = item
					ids.push(id)
					return {
						id,
						latitude: lat * 1,
						longitude: lng * 1,
						iconPath: '/static/marker1.png',
						width: 24,
						height: 24,
						// customCallout: {
						// 	display: "ALWAYS",
						// },
						line_name,
						callout: {
							content: line_name,
							color: '#2c2c2c',
							fontSize: 12,
							borderRadius: 10,
							bgColor: '#ffffff',
							padding: 8,
							display: 'ALWAYS',
						},

					}
				})
				this.customCalloutMarkerIds = ids
				console.log(this.markerList, 'markerList');
			},
			async initData() {
				const resp = await this.$request({
					url: "/Hotel/getHotelAll",
				})
				const { code, data, msg } = resp
				if (code !== 1) return
				if (!data.line) data.line = []
				this.generateMarker(data.line)
			},
			getRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.select('#mapWrap').boundingClientRect().exec(rect => {
					const [wrap] = rect
					this.$store.commit('setHeight', wrap.height)
					selector = null
				})
			},
		},
		computed: {
			...mapGetters(['location', 'contentHeight', 'addressText']),
			mapStyle() {
				return `width: 750rpx;height:${this.contentHeight}px;`
			},
		},
		data() {
			return {
				scale: 10,
				markerList: [],
				customCalloutMarkerIds: [],
				cityPickerValueDefault: [0, 0, 0],
				province: [],
				city: [],
				area: [],
				is_load: false,
				showSearch: false,
				address: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-wrapper {
		height: var(--status-height);
		width: 100%;
	}

	.city-change-wrap {
		height: 88rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 0 24rpx;
		display: flex;
		align-items: center;

		.arrow {
			width: 12rpx;
			height: 9rpx;
		}

		.location-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.address-text {
			font-size: 30rpx;
			line-height: 1;
			margin: 0 8rpx;
		}

	}

	.custom-callout {
		box-sizing: border-box;
		background-color: #fff;
		background: #FFFFFF;
		// box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
		border-radius: 4rpx;
		display: inline-flex;
		padding: 12rpx 16rpx;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx;
		margin-bottom: 12rpx;
		position: relative;
		overflow: unset;
		opacity: .6;



		.content {
			font-size: 24rpx;
			color: #2c2c2c;
			line-height: 1;

			&::after {
				content: "";
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
				border-width: 12rpx;
				border-color: #fff transparent transparent transparent;
				border-style: solid;
				box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
			}
		}
	}

	.cy-container-wrapper {
		.cy-footer-wrap {
			padding: 48rpx 32rpx;
			box-sizing: border-box;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			transition: transform .2s ease;

			&.active {
				transform: translate3d(0, 100%, 0);
			}

			.search-box {
				display: flex;
				align-items: center;
				background: #f2f2f2;
				box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				overflow: hidden;
				padding: 20rpx 32rpx;
				box-sizing: border-box;

				.search-input {
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
					margin-left: 8rpx;
				}

				.search-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.map-container {}

	}
</style>